<template>
	<div class="app_head">
		<el-header>
			<el-col :span="24" class="topbar-wrap header_bg" >
				<div class="topbar-logo topbar-btn">
					<p class="title"><i class="el-icon-data-analysis"></i> 微应用管理中心</p>
				</div>
				<!--展开折叠开关-->
				<div class="topbar-title">
						<div class="menu-toggle" @click.prevent="collapse">
						<i class="iconfont icon-menufold" v-show="!collapsed"></i>
						<i class="iconfont icon-menuunfold" v-show="collapsed"></i>
					</div>
					<span style="font-size: 18px;color: #fff;">微应用管理中心</span>
				</div>
				<div class="topbar-account topbar-btn">
					<!-- 用户登录信息 -->
					<el-dropdown trigger="click">
						<span class="el-dropdown-link userinfo-inner"><i class="iconfont icon-user"></i> {{nickname}}  <i
							class="iconfont icon-down"></i></span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>
								<router-link to="/user/userInfo"><span style="color: #555;font-size: 14px;">个人信息</span></router-link>
							</el-dropdown-item>
							<el-dropdown-item>
								<router-link :to="'/user/changepwd'"><span style="color: #555;font-size: 14px;">修改密码</span></router-link>
							</el-dropdown-item>
							<el-dropdown-item>
								<router-link :to="'/login'"><span @click='logout' style="color: #555;font-size: 14px;">退出登录</span></router-link>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				</el-col>
			</el-header>
		</div>
	</template>
<script>
import bus from '../eventBus.js';
export default{
	name:'Headr',
	data(){
		return{
			nickname:'',
			collapsed:false,
			tokenKey:''
		}
	},
	methods:{
		//折叠导航栏
		collapse() {
			this.collapsed = !this.collapsed;
			bus.$emit("collaped",this.collapsed);
		},
		//退出登录
		logout() {
			this.$confirm('确认退出吗?', '提示', {
				type: 'warning'
			}).then(() => {
				this.delCookie('token');
			}).catch(() => {

			});
		},
		delCookie (name){   
			this.$router.push('/login');
		    var exp = new Date();   
		    exp.setTime(exp.getTime() - 1);   
		    var cval= this.getCookie(name);   
		    if(cval!=null)   
		        document.cookie= name + "="+cval+"; path=/;expires="+exp.toGMTString();   
		},
		getCookie (name){
			var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
			if(arr=document.cookie.match(reg)){
				return unescape(arr[2]);
			}else{	
				return null;
			}
		},
		//弹窗提示	
		open() {
				this.$message({
				message: '恭喜你，这是一条成功消息',
				type: 'success'
				});
			}		
		},
		mounted() {
			// 折叠导航栏
			var self=this;
				bus.$on("collaped",function (msg) {
					self.collapsed=msg;
				});
					// 获取用户
			let user = this.getCookie('userName');
				if (user) {
					user = JSON.parse(user);
					self.nickname = user;
					console.log('获取到的用户名:',user);
				}
			}
		}
</script>
<style>
	.title{
		text-align: center;
	}
</style>